<template>
  <div id="login">
    <div id="form_space">
      <div align="center">
        <h1><span style="color: #2dc26b;"> 大</span><span style="color: #e03e2d;">学</span>
          <span style="color: #e67e23;">生</span><span style="color: #2dc26b;">就</span>
          <span style="color: #169179;">业</span><span style="color: #843fa1;">信</span><span style="color: #e67e23;">息</span>
          <span style="color: #34495e;">管</span><span style="color: #e03e2d;">理</span><span style="color: #2dc26b;">平</span>
          <span style="color: #169179;">台</span>
        </h1>
        <h2>{{ login_title }}</h2>
      </div>
      <div style="padding: 20px">
        <el-form ref="form" :model="login_form">
          <el-select v-model="login_form.type" placeholder="请选择角色" prefix-icon="el-icon-lock" style="width: 360px;">
            <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
            </el-option>
          </el-select>
          <el-form-item style="margin-top: 20px">
            <el-input
                v-model="login_form.username"
                prefix-icon="el-icon-user"
                placeholder="账号"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-input
                v-model="login_form.password"
                prefix-icon="el-icon-lock"
                placeholder="密码"
                show-password
            ></el-input>
          </el-form-item>
          <el-form-item prop="verifycode" style="width: 230px">
            <el-input
                v-model="login_form.user_code"
                prefix-icon="el-icon-key"
                placeholder="验证码"
            ></el-input>

              <div @click="refreshCode" style="margin-left: 244px;margin-top: -40px">
                <s-identify :identifyCode="identifyCode"></s-identify>
              </div>

          </el-form-item>

          <el-form-item>
            <el-checkbox v-model="remember_password">记住密码</el-checkbox>
          </el-form-item>
          <el-form-item align="center">
            <el-button type="primary" icon="el-icon-right" @click="login()">登录</el-button>
          </el-form-item>
          <el-form-item>
            <el-link type="danger" style="float: left" @click="to('/register')"
            >注册
            </el-link
            >
            <el-link
                type="primary"
                style="float: right"
                @click="to('/forget/password')"
            >找回密码？
            </el-link
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import SIdentify from '../utils/identify.vue'
import topimg from "../../assets/studentimgs/top.jpg"
export default {
  data() {
    // 验证码自定义验证规则
    return {
      tops:topimg,
      login_title: "登录",
      login_form: {
        username: "",
        password: "",
        user_code: "",
        type: '',
      },
      remember_password: false,
      options: [{
        value: 'student',
        label: '学生'
      }, {
        value: 'head',
        label: '班主任'
      }, {
        value: 'enter',
        label: '企业'
      }, {
        value: 'admini',
        label: '管理员'
      }],
      fontstyle: {},
      identifyCodes: '1234567890',
      identifyCode: '',
    }
  },
  components: {
    SIdentify
  },
  methods: {
    login() {
     if(this.identifyCode != this.login_form.user_code){
       this.$message.error("验证码错误");
       this.refreshCode()
     }else {
       //发送请求
       this.$axios({
         url:this.$axios.defaults.baseURL+"/student/loginconf",
         method:"post",
         params:this.login_form
       }).then(res=>{
         if(res.data.status){
           this.$message.success(res.data.msg);
           this.intial_aside_menu();
           sessionStorage.setItem("user_label",this.login_form.type);
           sessionStorage.setItem(this.login_form.type+"uid",res.data.uid);
           sessionStorage.setItem(this.login_form.type+"name",res.data.name);
           sessionStorage.setItem(this.login_form.type+"img",res.data.toux);
           //唯一编号
           setTimeout(() => {
             if(this.login_form.type == "student"){
               this.$router.push("/student");
             }else if(this.login_form.type == "head"){
               this.$router.push("/teacherhome")
             }else if(this.login_form.type == "enter"){
               this.$router.push("/enterhome")
             }
           }, 1500);
         }else {
           this.$message.error(res.data.msg);
           this.refreshCode()
         }
       })
     }
    },
    // 生成随机数
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min)
    },
    // 切换验证码
    refreshCode() {
      this.identifyCode = ''
      this.makeCode(this.identifyCodes, 4)
    },
    // 生成四位随机验证码
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
            this.randomNum(0, this.identifyCodes.length)
            ]
      }
    },
    intial_aside_menu() {
      const studentMain = [
        {
          name: "个人信息",
          path:"/home",
          icon: "el-icon-user-solid",
        },
        {
          name: "我的收藏",
          path:"/collect",
          icon: "el-icon-star-on",
        },
        {
          name: "简历投递情况",
          path:"/resume",
          icon: "el-icon-s-promotion",
        },
        {
          name: "就业信息",
          path:"/employment",
          icon: "el-icon-edit-outline",
        }
      ];
      const studentMenu = [
        {
          name: "个人中心",
          name_color: "#fff",
          icon: "fa fa-address-card",
          icon_color: "#fff",
          name_show: true,
          menu_item: [

            {
              path: "/setting/headimg",
              label: "头像修改",
              label_color: "#fff",
              label_icon: "el-icon-camera-solid",
              label_icon_color: "#fff",
              label_show: true,
            },
            {
              path: "/setting/password",
              label: "密码修改",
              label_color: "#fff",
              label_icon: "el-icon-lock",
              label_icon_color: "#fff",
              label_show: true,
            },
          ],
        },
      ];

      const headMenu = [
        {
          name: "就业信息",
          name_color: "#fff",
          icon: "fa fa-mortar-board",
          icon_color: "#fff",
          name_show: true,
          menu_item: [
            {
              path: "/classstatus",
              label: "本班级",
              label_color: "#fff",
              label_icon: "fa fa-user",
              label_icon_color: "#fff",
              label_show: true,
            },
            {
              path: "/majorstatus",
              label: "本专业",
              label_color: "#fff",
              label_icon: "fa fa-group",
              label_icon_color: "#fff",
              label_show: true,
            },
          ],
        },
        {
          name: "就业情况分析",
          name_color: "#fff",
          icon: "fa fa-pie-chart",
          icon_color: "#fff",
          name_show: true,
          menu_item: [
            {
              path: "/teacherhome",
              label: "本班级",
              label_color: "#fff",
              label_icon: "fa fa-user",
              label_icon_color: "#fff",
              label_show: true,
            },
            {
              path: "/majorhome",
              label: "本专业",
              label_color: "#fff",
              label_icon: "fa fa-group",
              label_icon_color: "#fff",
              label_show: true,
            },
          ],
        },
        {
          name: "个人中心",
          name_color: "#fff",
          icon: "fa fa-address-card",
          icon_color: "#fff",
          name_show: true,
          menu_item: [
            {
              path: "/setting/user",
              label: "个人信息",
              label_color: "#fff",
              label_icon: "el-icon-menu",
              label_icon_color: "#fff",
              label_show: true,
            },
            {
              path: "/setting/headimg",
              label: "头像修改",
              label_color: "#fff",
              label_icon: "el-icon-camera-solid",
              label_icon_color: "#fff",
              label_show: true,
            },
            {
              path: "/setting/password",
              label: "密码修改",
              label_color: "#fff",
              label_icon: "el-icon-lock",
              label_icon_color: "#fff",
              label_show: true,
            },
          ],
        }
      ];
      const enterMain = [
        {
          name: "岗位信息",
          path:"/enterhome",
          icon: "el-icon-s-grid",
        },
        {
          name: "简历受理",
          path:"/resumeaccept",
          icon: "el-icon-star-on",
        },
      ];
      const enterMenu = [
        {
          name: "个人中心",
          name_color: "#fff",
          icon: "fa fa-address-card",
          icon_color: "#fff",
          name_show: true,
          menu_item: [
            {
              path: "/getenter",
              label: "公司信息",
              label_color: "#fff",
              label_icon: "el-icon-menu",
              label_icon_color: "#fff",
              label_show: true,
            },
            {
              path: "/setting/headimg",
              label: "头像修改",
              label_color: "#fff",
              label_icon: "el-icon-camera-solid",
              label_icon_color: "#fff",
              label_show: true,
            },
            {
              path: "/setting/password",
              label: "密码修改",
              label_color: "#fff",
              label_icon: "el-icon-lock",
              label_icon_color: "#fff",
              label_show: true,
            },
          ],
        }
      ];
      sessionStorage.setItem("studentMenu", JSON.stringify(studentMenu));
      sessionStorage.setItem("enterMenu", JSON.stringify(enterMenu));
      sessionStorage.setItem("studentMain", JSON.stringify(studentMain));
      sessionStorage.setItem("headMenu", JSON.stringify(headMenu));
      sessionStorage.setItem("enterMain", JSON.stringify(enterMain));
    },
    to(link) {
      this.$router.push(link);
    },
  },
  mounted() {
    /*this.$notify({
      title: "请选择用户进行体验",
      message: "请选择用户类别，不同类别权限不同",
      duration: 0,
    });*/
    this.refreshCode();
  },
  destroyed() {
    this.$notify.closeAll();
  },
};
</script>
<style scoped>
h1 {
  color: #606266;
}
p {
  color: #606266;
}
#login {
  min-height: 100vh;
  background: url("../../assets/studentimgs/back.jpg");
}
#form_space {
  border-radius: 10px;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  height: 400px;
  width: 400px;
}
body{
  background: url("../../assets/studentimgs/back.jpg");
}
</style>